<template>
  <div class="notice-container">

    <!-- 添加页面标题区域 -->
    <div class="page-header">
      <h2>公告列表</h2>
      <p class="subtitle">查看最新公告信息</p>
    </div>

    <!-- 公告列表 -->
    <el-row :gutter="20" class="notice-list">
      <el-col :span="8" v-for="notice in notices" :key="notice.id">
        <PinkCard :notice="notice" :title="notice.name" :content="notice.content" :user="notice.type"
                  :current="notice.current"></PinkCard>
      </el-col>
    </el-row>

    <!--    &lt;!&ndash; 公告列表 &ndash;&gt;-->
    <!--    <el-row :gutter="20" class="notice-list">-->
    <!--      <el-col :span="8" v-for="notice in notices" :key="notice.id">-->
    <!--        <el-card class="notice-card" shadow="hover">-->
    <!--          <div class="notice-header">-->
    <!--            <h2 class="notice-title">{{ notice.name }}</h2>-->
    <!--            <span class="notice-type">{{ notice.type }}</span>-->
    <!--          </div>-->
    <!--          <div class="notice-content">-->
    <!--            <p class="notice-info"><strong>发布人：</strong> {{ notice.user }}</p>-->
    <!--            <p class="notice-info"><strong>发布时间：</strong> {{ notice.date }}</p>-->
    <!--            <div class="notice-text" v-html="notice.content"></div>-->
    <!--          </div>-->
    <!--          <div class="notice-footer">-->
    <!--            <el-button type="text" @click="viewDetail(notice)">查看详情</el-button>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

  </div>
</template>

<script>
import api from "@/api";
import PinkCard from "@/components/CardView.vue";

export default {
  name: "HomeView",
  components: {
    PinkCard
  },
  data() {
    return {
      notices: [] // 公告列表数据
    };
  },
  mounted() {
    this.fetchNotices();
  },
  methods: {
    // 获取公告列表
    async fetchNotices() {
      const response = await api.notice.noticeList();
      this.notices = response.data.data;
    },
    // 查看公告详情
    viewDetail(e) {
      const name = JSON.stringify(e.name);
      const id = JSON.stringify(e.id);
      this.$router.push({
        path: "/user/notice_detail?id=" + id,
        query: {name},
      })
    }
  }
};
</script>

<style scoped>
.notice-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  color: #303133;
}

.subtitle {
  color: #909399;
  font-size: 14px;
}

.notice-list {
  margin-top: 20px;
}

.notice-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  margin-bottom: 20px;
}

.notice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaeaeb;
}

.notice-title {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.notice-type {
  font-size: 14px;
  color: #909399;
}

.notice-content {
  padding: 15px;
}

.notice-info {
  font-size: 13px;
  color: #606266;
  margin-bottom: 10px;
}

.notice-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.notice-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.notice-footer .el-button {
  font-size: 14px;
  color: #409eff;
}
</style>